<#assign s=JspTaglibs["/WEB-INF/struts-tags.tld"] />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
	<link rel="stylesheet" type="text/css" href="../styles/global.css"/>
	<link rel="stylesheet" type="text/css" href="../styles/elements.css"/>
	<link rel="stylesheet" type="text/css" href="../scripts/jquery-ui-1.8.16/jquery-ui-1.8.16.custom.css" />
	<script type="text/javascript" src="../scripts/jquery-ui-1.8.16/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="../scripts/jquery-ui-1.8.16/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="../scripts/highstock-1.0.Beta/highstock.js"></script>
	<script type="text/javascript" src="../scripts/highstock-1.0.Beta/themes/grid.js"></script>
	<script type="text/javascript" src="../scripts/common.js"></script>

<script>
var gpdm = "${gpdm}";
var latest_gj = 0;
$(document).ready(function(){
	refresh_fst();
	$("#rkx").attr("src","http://218.30.115.150/newchart/daily/n/"+gpdm.toLowerCase()+".gif");
	window.setInterval(refresh_sshq, 3000);
	window.setInterval(refresh_fst, 30000);
});

function color(v,id){
	if(v>0){
		$(id).css("color","red");
	}else if(v==0){
		$(id).css("color","#000000");
	}else{
		$(id).css("color","green");
	}
}
function refresh_fst(){
	$("#fst").attr("src","http://image.sinajs.cn/newchart/min/n/"+gpdm.toLowerCase()+".gif?r="+Math.random());
}
function refresh_sshq(){
	$("#loading").show();
	$.ajax({
		url:"http://hq.sinajs.cn/list="+gpdm.toLowerCase(),
		dataType:"script",
		timeout:10000,
		cache:true,
		async:true,
		success:function(html,status){
			var data = hq_str_${gpdm?lower_case}.split(",");
			if(data!='' && data.length>0){
				var zrspj=parseFloat(data[2]);
				
				var dqj = parseFloat(data[3]);
				
				var b1sl=parseInt(data[10]);
				var b1je=parseFloat(data[11]);
				
				var b2sl=parseInt(data[12]);
				var b2je=parseFloat(data[13]);
				
				var b3sl=parseInt(data[14]);
				var b3je=parseFloat(data[15]);
				
				var b4sl=parseInt(data[16]);
				var b4je=parseFloat(data[17]);
				
				var b5sl=parseInt(data[18]);
				var b5je=parseFloat(data[19]);
				
				var s1sl=parseInt(data[20]);
				var s1je=parseFloat(data[21]);
				
				var s2sl=parseInt(data[22]);
				var s2je=parseFloat(data[23]);
				
				var s3sl=parseInt(data[24]);
				var s3je=parseFloat(data[25]);
				
				var s4sl=parseInt(data[26]);
				var s4je=parseFloat(data[27]);
				
				var s5sl=parseInt(data[28]);
				var s5je=parseFloat(data[29]);
				
				pkData(b1sl,b1je,b2sl,b2je,b3sl,b3je,b4sl,b4je,b5sl,b5je,s1sl,s1je,s2sl,s2je,s3sl,s3je,s4sl,s4je,s5sl,s5je);
				pkColor(b1je,b2je,b3je,b4je,b5je,s1je,s2je,s3je,s4je,s5je,zrspj);
				pkBar(b1sl,b2sl,b3sl,b4sl,b5sl,s1sl,s2sl,s3sl,s4sl,s5sl);
				
				
				var bl = ((dqj-zrspj)/zrspj*100).toFixed(2)+"%";
				var cj = dqj-zrspj;
				var cjText = (dqj-zrspj).toFixed(2);
				if(cj>0){
					$("#price").html(dqj.toFixed(2)+" <small>+"+cjText+" "+bl+"</small>");
					$("#price").css("color","red");
					$("#dqj").html(dqj.toFixed(2)+" <small>+"+cjText+" "+bl+"</small>");
					$("#dqj").css("color","red");
				}else if(cj<0){
					$("#price").html(dqj.toFixed(2)+" <small>"+cjText+" "+bl+"</small>");
					$("#price").css("color","green");
					$("#dqj").html(dqj.toFixed(2)+" <small>"+cjText+" "+bl+"</small>");
					$("#dqj").css("color","green");
				}else{
					$("#price").html(dqj.toFixed(2)+" <small>"+cjText+" "+bl+"</small>");
					$("#price").css("color","");
					$("#dqj").html(dqj.toFixed(2)+" <small>"+cjText+" "+bl+"</small>");
					$("#dqj").css("color","");
				}
				
				$("#xx_gpdm").text(gpdm.substring(2));
				$("#gpmc").text(data[0]);
				$("#kpj").text(data[1]);
				$("#spj").text(data[2]);
				$("#zgj").text(data[4]);
				$("#zdj").text(data[5]);
				$("#cjl").text(formatMoney(data[9])+" 元");
				$("#zhgx").text("最后更新时间："+data[30]+" "+data[31]);
			}
			$("#loading").hide();
		}
	});
}

function paintColor(v,id){
	if(v>0){
		$("#"+id).removeClass("item-down");
		$("#"+id).addClass("item-up");
	}else if(v<0){
		$("#"+id).removeClass("item-up");
		$("#"+id).addClass("item-down");
	}else{
		$("#"+id).removeClass("item-up");
		$("#"+id).removeClass("item-down");	
	}
}

/**
 * 设置盘口数据。
 */
function pkData(b1sl,b1je,b2sl,b2je,b3sl,b3je,b4sl,b4je,b5sl,b5je,s1sl,s1je,s2sl,s2je,s3sl,s3je,s4sl,s4je,s5sl,s5je){

	$("#b1sl").text(b1sl);
	$("#b1je").text(b1je);
	
	$("#b2sl").text(b2sl);
	$("#b2je").text(b2je);
	
	$("#b3sl").text(b3sl);
	$("#b3je").text(b3je);
	
	$("#b4sl").text(b4sl);
	$("#b4je").text(b4je);
	
	$("#b5sl").text(b5sl);
	$("#b5je").text(b5je);

	$("#s1sl").text(s1sl);
	$("#s1je").text(s1je);
	
	$("#s2sl").text(s2sl);
	$("#s2je").text(s2je);
	
	$("#s3sl").text(s3sl);
	$("#s3je").text(s3je);
	
	$("#s4sl").text(s4sl);
	$("#s4je").text(s4je);
	
	$("#s5sl").text(s5sl);
	$("#s5je").text(s5je);
}

/**
 * 设置盘口数据的颜色
 */
function pkColor(b1,b2,b3,b4,b5,s1,s2,s3,s4,s5,zrspj){
	paintColor(b1-zrspj,"item-b1");
	paintColor(b2-zrspj,"item-b2");
	paintColor(b3-zrspj,"item-b3");
	paintColor(b4-zrspj,"item-b4");
	paintColor(b5-zrspj,"item-b5");
	paintColor(s1-zrspj,"item-s1");
	paintColor(s2-zrspj,"item-s2");
	paintColor(s3-zrspj,"item-s3");
	paintColor(s4-zrspj,"item-s4");
	paintColor(s5-zrspj,"item-s5");
}

/**
 * 设置盘口买卖盘数量柱状图的长度
 */
function pkBar(b1,b2,b3,b4,b5,s1,s2,s3,s4,s5){
	var max=b1;
	if(max<b2)max=b2;
	if(max<b3)max=b3;
	if(max<b4)max=b4;
	if(max<b5)max=b5;
	if(max<s1)max=s1;
	if(max<s2)max=s2;
	if(max<s3)max=s3;
	if(max<s4)max=s4;
	if(max<s5)max=s5;
	
	$("#b1slbar").css("width",(b1*100/max));
	$("#b2slbar").css("width",(b2*100/max));
	$("#b3slbar").css("width",(b3*100/max));
	$("#b4slbar").css("width",(b4*100/max));
	$("#b5slbar").css("width",(b5*100/max));
	$("#s1slbar").css("width",(s1*100/max));
	$("#s2slbar").css("width",(s2*100/max));
	$("#s3slbar").css("width",(s3*100/max));
	$("#s4slbar").css("width",(s4*100/max));
	$("#s5slbar").css("width",(s5*100/max));
}
</script>
<style type="text/css">
#sshq{
	table-layout:fixed;
	background-color:#F5F5F5;
	border-radius:5px;
}
#sshq td{
	border-top-width:0;
	border-left-width:0;
	border-right-width:0;
	border-bottom-width:1px;
	text-align:right;
}
#sshq td.noborder{
	border-top-width:0;
	border-left-width:0;
	border-right-width:0;
	border-bottom-width:0px;
	text-align:right;
}
#sshq td.noborderleft{
	border-width:0;
	text-align:left;
}
#sshq td.nobordercenter{
	border-width:0;
	text-align:center;
}
#dqj{
	font-size:25px;
	font-weight:bold;
}
#zhgx{
	font-size:10px;
	color:gray;
}
.slbar{
	width:150px;
}
.slbar span{
	display:inline-block;
	background-color:#444444;
	color:#444444;
	height:12px;
	vertical-align:middle;
}
tr.item-up .sl, tr.item-up .je{
	color:red;
}
tr.item-up .slbar span{
	background-color:red;
	color:red;
}
tr.item-down .sl, tr.item-down .je{
	color:green;
}
tr.item-down .slbar span{
	background-color:green;
	color:green;
}

</style>
</head>
<body>
<div id="sshqdiv" style="margin:0 auto;text-align:center">
	<table class="maptable" id="sshq">
		<caption>实时行情</caption>
		<tr id="item-s5">
			<td class="noborder"></td>
			<td align="right">卖⑤</td>
			<td id="s5je" class="je"></td>
			<td class="slbar"><span id="s5slbar"></span></td>
			<td id="s5sl" class="sl"></td>
			<td class="nobordercenter" colspan="2" rowspan="2" id="dqj"></td>
			<td class="noborder"></td>
		</tr>
		<tr id="item-s4">
			<td class="noborder"></td>
			<td align="right">卖④</td>
			<td id="s4je" class="je"></td>
			<td class="slbar"><span id="s4slbar"></span></td>
			<td id="s4sl" class="sl"></td>
			<td class="noborder"></td>
		</tr>
		<tr id="item-s3">
			<td class="noborder"></td>
			<td align="right">卖③</td>
			<td id="s3je" class="je"></td>
			<td class="slbar"><span id="s3slbar"></span></td>
			<td id="s3sl" class="sl"></td>
			<td class="noborder">股票代码：</td>
			<td class="noborderleft" align="left" id="xx_gpdm"></td>
			<td class="noborder"></td>
		</tr>
		<tr id="item-s2">
			<td class="noborder"></td>
			<td align="right">卖②</td>
			<td id="s2je" class="je"></td>
			<td class="slbar"><span id="s2slbar"></span></td>
			<td id="s2sl" class="sl"></td>
			<td class="noborder">股票名称：</td>
			<td class="noborderleft" id="gpmc"></td>
			<td class="noborder"></td>
		</tr>
		<tr id="item-s1">
			<td class="noborder"></td>
			<td align="right" style="border-color:#000000">卖①</td>
			<td id="s1je" style="border-color:#000000" class="je"></td>
			<td class="slbar" style="border-color:#000000"><span id="s1slbar"></span></td>
			<td style="border-color:#000000" id="s1sl" class="sl"></td>
			<td class="noborder" align="right">昨日收盘价：</td>
			<td class="noborderleft" id="spj"></td>
			<td class="noborder"></td>
		</tr>
		<tr id="item-b1">
			<td class="noborder"></td>
			<td align="right">买①</td>
			<td id="b1je" class="je"></td>
			<td class="slbar"><span id="b1slbar"></span></td>
			<td id="b1sl" class="sl"></td>
			<td class="noborder" align="right">今日开盘价：</td>
			<td class="noborderleft" id="kpj"></td>
		</tr>
		<tr id="item-b2">
			<td class="noborder"></td>
			<td align="right">买②</td>
			<td id="b2je" class="je"></td>
			<td class="slbar"><span id="b2slbar"></span></td>
			<td id="b2sl" class="sl"></td>
			<td class="noborder">今日最高价：</td>
			<td class="noborderleft" id="zgj"></td>
			<td class="noborder"></td>
		</tr>
		<tr id="item-b3">
			<td class="noborder"></td>
			<td align="right">买③</td>
			<td id="b3je" class="je"></td>
			<td class="slbar"><span id="b3slbar"></span></td>
			<td id="b3sl" class="sl"></td>
			<td class="noborder">今日最低价：</td>
			<td class="noborderleft" id="zdj"></td>
			<td class="noborder"></td>
		</tr>
		<tr id="item-b4">
			<td class="noborder"></td>
			<td align="right">买④</td>
			<td id="b4je" class="je"></td>
			<td class="slbar"><span id="b4slbar"></span></td>
			<td id="b4sl" class="sl"></td>
			<td class="noborder">成交金额：</td>
			<td class="noborderleft" id="cjl"></td>
			<td class="noborder"></td>
		</tr>
		<tr id="item-b5">
			<td class="noborder"></td>
			<td align="right">买⑤</td>
			<td id="b5je" class="je"></td>
			<td class="slbar"><span id="b5slbar"></span></td>
			<td id="b5sl" class="sl"></td>
			<td class="noborder" colspan="3"></td>
		</tr>
		<tr>
			<td class="noborder" colspan="5"></td>
			<td class="noborder" id="zhgx" colspan="2"></td>
			<td class="noborderleft"><img id='loading' src='styles/res/loading.gif' style="display:inline;height:15px;padding-left:5px;"></img></td>
		</tr>
	</table>
</div>

<div style="height:50px"></div>

<div style="text-align:center">
	<table class="datatable">
	<caption>分时图</caption>
	<tr><td>
	<img id="fst" src=""></img>
	</td></tr>
	</table>
</div>
<div style="text-align:center">
	<table class="datatable">
	<caption>日K线</caption>
	<tr><td>
	<img id="rkx" src=""></img>
	</td></tr>
	</table>
</div>
</body>
</html>